<template>
	<view class="product-marketing-detail">
		<view class="already-lsn-box">
			<view class="header-scan-box">
				<view class="header-scan-bg"></view>
				<view class="header-scan-input-box">
					<van-icon class="scan-icon" name="scan" @click.stop="ChooseImage" />
					<input class="scan-input" type="text" v-model="plateNum" disabled placeholder="扫描或填写车牌号"
						placeholder-class="scan-input-placeholder" @click.stop="openPlate">
					<van-icon class="already-lsn-close-btn" v-show="plateNum" name="close"
						@click.stop.prevent="handleResetLsn" />
				</view>

				<button class="search-btn" @click.stop="searchPlate">查询</button>
			</view>

			<view class="cus-info-box">
				<view class="header-scan-bg"></view>
				<view class="cus-info-content-box">
					<view class="cus-info-left-box">
						<view class="cus-info-left-title">{{plateData.vehicleType ? plateData.vehicleType : "-"}}</view>
						<view class="cus-info-left-item-text">{{carLsn ? carLsn : "-"}}</view>
					</view>
					<view class="cus-info-right-box"></view>
				</view>
			</view>

			<view class="cus-info-box">
				<view class="header-scan-bg"></view>
				<view class="cus-info-content-box yanghupin">
					<view class="cus-info-left-box">
						<view class="cus-info-left-text">养护品可能性</view>
						<view class="cus-info-left-bottom-text">
							{{plateData.typeRecommend.name ? plateData.typeRecommend.name : "-"}}
						</view>
					</view>
					<view class="cus-info-chart-box">
						<qiun-data-charts type="arcbar" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
			</view>

			<view class="cus-info-box">
				<view class="header-scan-bg"></view>
				<view class="cus-result-content-box">
					<view class="cus-result-title">零件结果 ({{chartDataList.length}})</view>
					<view class="cus-result-bottom-box">
						<view class="cus-result-left-box" v-show="chartShow" v-for="(item, index) in chartDataList"
							:key="index">
							<view class="cus-result-bottom-chart">
								<qiun-data-charts type="arcbar" :opts="item.opts" :canvas2d="true"
									:canvasId="'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz234567' + index"
									:chartData="item.chartData" />
							</view>

							<view class="cus-result-text">
								{{item.name ? item.name : "-"}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cus-product-info-box">
				<view class="cus-product-box">
					<view class="cus-product-title">自定义产品</view>
					<view class="cus-product-list" v-if="plateData.customRecommend.length > 0">
						<view class="cus-product-item"
							:class="{'config-product-bg1': index % 4 == 0, 'config-product-bg2': index % 4 == 1, 'config-product-bg3': index % 4 == 2, 'config-product-bg4': index % 4 == 3,}"
							v-for="(item, index) in plateData.customRecommend" :key="index">
							{{item.name}}
						</view>

					</view>
					<view v-else class="no-cus-product-item">无自定义产品</view>
				</view>
			</view>

			<view class="cus-lately-info-box">
				<view class="cus-result-title">客户信息</view>
				<view class="cus-lately-list">
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">车架号</view>
						<view class="cus-lately-item-right-text">
							<text>{{plateData.vin ? plateData.vin : "-"}}</text>
							<text class="copy-text" @click.stop="copyText(plateData.vin)">复制</text>
						</view>
					</view>
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">ABC类别</view>
						<view class="cus-lately-item-right-text">{{plateData.level ? plateData.level : "-"}}</view>
					</view>
					<!-- <view class="cus-lately-item">
						<view class="cus-lately-item-left-text">开票日期</view>
						<view class="cus-lately-item-right-text">
							{{plateData.purchaseDate ? plateData.purchaseDate: "-"}}
						</view>
					</view> -->
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">上次来店时间</view>
						<view class="cus-lately-item-right-text">
							{{plateData.returnDateLast ? plateData.returnDateLast: "-"}}
						</view>
					</view>
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">上次维修类型</view>
						<view class="cus-lately-item-right-text">
							{{plateData.maintenanceTypesLast ? plateData.maintenanceTypesLast : "-"}}
						</view>
					</view>
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">上次自费金额</view>
						<view class="cus-lately-item-right-text">
							{{plateData.paymentAmountLast ? plateData.paymentAmountLast: "-"}}元
						</view>
					</view>
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">近一年来店次数</view>
						<view class="cus-lately-item-right-text">{{plateData.returnNum ? plateData.returnNum: "-"}}次
						</view>
					</view>
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">近一年保养次数</view>
						<view class="cus-lately-item-right-text">
							{{plateData.maintainingYear ? plateData.maintainingYear: "-"}}次
						</view>
					</view>
					<view class="cus-lately-item">
						<view class="cus-lately-item-left-text">近一年自费金额</view>
						<view class="cus-lately-item-right-text">{{plateData.payYear ? plateData.payYear: "-"}}元</view>
					</view>
				</view>

			</view>

			<view class="height"></view>
		</view>

		<!-- 引用车牌组件 -->
		<plate-number ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plate-number>
	</view>
</template>

<script>
	import plateNumber from '@/components/plate-number/plateNumber.vue';
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				plateNum: "",
				carLsn: "",
				plateData: {},
				chartDataList: [],
				chartData1: {},
				chartShow: true,
				lsnSearchHistoryList: [],
				opts1: {
					color: ["#2f6faa"],
					padding: undefined,
					title: {
						name: "",
						fontSize: 13,
						color: "#fff"
					},
					subtitle: {
						name: "可能性",
						fontSize: 11,
						color: "#fff"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 6,
							backgroundColor: "#50525d",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},

			}
		},
		components: {
			plateNumber
		},
		onLoad(options) {
			//初始化
			this.$refs.plate.init();
			this.carLsn = options.lsn;
			const lsnData = uni.getStorageSync("lsnData");
			const chartDataList = this.chartDataList;
			const colorList = ['#B49CFA', '#9BE9EC', '#66A3FD'];
			if (lsnData) {
				this.plateData = lsnData;
				if (lsnData.partRecommend.length > 0) {
					for (let i = 0; i < lsnData.partRecommend.length; i++) {
						chartDataList.push({
							name: lsnData.partRecommend[i].name,
							chartData: {
								series: [{
									name: "可能性",
									color: colorList[i % 3],
									data: lsnData.partRecommend[i].possibility
								}]
							},
							opts: {
								color: [colorList[i % 3]],
								padding: undefined,
								title: {
									name: (lsnData.partRecommend[i].possibility * 100).toFixed(1) + "%",
									fontSize: 13,
									color: "#fff"
								},
								subtitle: {
									name: "可能性",
									fontSize: 11,
									color: "#fff"
								},
								extra: {
									arcbar: {
										type: "circle",
										width: 6,
										backgroundColor: "#50525d",
										startAngle: 1.5,
										endAngle: 0.25,
										gap: 2,
									}
								}
							},
						})
					}
					console.log('零件结果处理数据', chartDataList);
				}
				this.chartData1 = {
					series: [{
						name: "可能性",
						color: "#2f6faa",
						data: lsnData.typeRecommend.possibility
					}]
				};
				this.opts1.title.name = (lsnData.typeRecommend.possibility * 100).toFixed(1) + "%";
			}
		},
		onHide() {
			//恢复初始化
			this.plateNum = '';
		},
		methods: {
			/**
			 * @desc 车牌选择关闭和打开
			 */
			showOrHide(falg) {
				console.log('falg', falg);
				if (falg) {
					this.chartShow = false;
				} else {
					this.chartShow = true;
				}
			},
			openPlate() {
				this.$refs.plate.show();
			},
			// 上传图片
			ChooseImage(index) {
				let loginInfo = uni.getStorageSync("loginInfo");
				var that = this;
				uni.chooseImage({
					count: 1, //默认最多上传6张图片
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0];
						console.log('tempFilePaths', tempFilePaths);
						getApp().showLoading();
						uni.uploadFile({
							url: getApp().globalData.websiteUrl +
								"/api/v1/LsnRecognition/LsnRecognition",
							filePath: tempFilePaths,
							name: 'files',
							header: {
								'Authorization': ('Bearer ' + loginInfo.token) || ''
							},
							formData: {
								'files': tempFilePaths
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								let res = JSON.parse(uploadFileRes.data);
								if (res.code == 200 && res.data.Lsn) {
									that.plateNum = res.data.Lsn;
									that.searchPlate();
								} else {
									getApp().showToast("请上传正确的车牌号照片!");
									return false;
								}
							}
						});


					}
				});
			},
			searchPlate() {
				const lsnCache = uni.getStorageSync("lsnCache");
				//输入了正确的车牌才执行请求
				if (this.plateNum.length > 6) {
					this.$refs.plate.close();
					getApp().showLoading();
					console.log('this.plateNum', this.plateNum);
					if (lsnCache) {
						let searchIndex = lsnCache.indexOf(this.plateNum);
						if (lsnCache.length < 10) {
							if (searchIndex == -1) {
								lsnCache.unshift(this.plateNum);
							} else {
								lsnCache.splice(searchIndex, 1);
								lsnCache.unshift(this.plateNum);
							}
						} else {
							if (searchIndex == -1) {
								lsnCache.splice(lsnCache.length - 1, 1);
								lsnCache.unshift(this.plateNum);
							} else {
								lsnCache.splice(searchIndex, 1);
								lsnCache.unshift(this.plateNum);
							}
						}
						uni.setStorageSync("lsnCache", lsnCache);
						this.lsnSearchHistoryList = lsnCache;
					} else {
						let cache = [];
						cache.push(this.plateNum);
						uni.setStorageSync("lsnCache", cache);
						this.lsnSearchHistoryList = cache;
					}
					apiRqs._getProductTop(this.plateNum).then((res) => {
						console.log('查询结果', res);
						uni.hideLoading();
						if (res.code == 200) {
							console.log(res.data);
							let newData = JSON.parse(JSON.stringify(res.data));
							if (newData.purchaseDate == "0001-01-01 00:00:00") {
								newData.purchaseDate = "-"
							}
							this.carLsn = this.plateNum;
							this.plateData = newData;
							this.plateNum = "";
							this.$refs.plate.init();
						} else {
							getApp().showToast(res.msg);
						}
					}).catch((err) => {
						console.log('err', err);
					})

				} else {
					getApp().showToast("请输入正确的车牌号");
				}
			},
			// 清空车牌号
			handleResetLsn() {
				this.plateNum = "";
				this.$refs.plate.init();
			},
			// 复制车架号
			copyText(vin) {
				uni.setClipboardData({
					data: vin,
					success: function(res) {
						getApp().showToast("复制成功");
					}
				});
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #2A2D3A;
	}

	.product-marketing-detail {
		.already-lsn-box {
			.header-scan-box {
				display: flex;
				align-items: center;
				padding: 5px 0 5px 15px;
				position: relative;
				margin: 20px;
				border: 1px solid rgba(255, 255, 255, 0.25);
				border-radius: 4px;

				.header-scan-bg {
					background: rgba(255, 255, 255, 0.10);
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 4px;
					filter: blur(10);
				}

				.header-scan-input-box {
					flex: 1;
					display: flex;
					align-items: center;

					.scan-icon {
						width: 28px;
						flex: 0 0 28px;
						font-size: 28px;
						color: #fff;
					}

					.scan-input {
						flex: 1;
						min-width: 0;
						height: 42px;
						color: #fff;
						font-size: 13px;
						margin-left: 10px;
					}

					.close-icon {
						width: 18px;
						flex: 0 0 18px;
						font-size: 18px;
						color: #999;
					}

					.already-lsn-close-btn {
						font-size: 16px;
						width: 16px;
						flex: 0 0 16px;
						color: #fff;
						padding: 0 5px;
					}

					.scan-input-placeholder {
						font-size: 13px;
						color: rgba(255, 255, 255, 0.5);
						font-weight: 400;
					}
				}

				.search-btn {
					width: 70px;
					flex: 0 0 70px;
					height: 40px;
					line-height: 40px;
					background-color: transparent;
					color: #fff;
					border: none;
					border-radius: 0;
					font-size: 14px;

					&::after {
						border: none;
					}
				}


			}

			.cus-product-info-box {
				margin: 20px;
				border-radius: 4px;
				background: linear-gradient(to right, rgb(79, 82, 91), rgb(42, 45, 57));

				.cus-product-box {
					padding-bottom: 20px;
					background: linear-gradient(to right, rgb(79, 82, 91), rgb(42, 45, 57));
					border-radius: 4px;

					.cus-product-title {
						font-size: 16px;
						color: #fff;
						font-weight: 500;
						padding: 15px 20px 0 20px;
					}

					.cus-product-list {
						margin: 5px 10px 0 10px;
						display: flex;
						flex-wrap: wrap;

						.cus-product-item {
							display: inline-block;
							width: calc((100% - 15px) / 2);
							height: 84rpx;
							align-self: baseline;
							padding: 5px 12px;
							font-size: 13px;
							color: rgba(255, 255, 255, 0.72);
							border-radius: 6px;
							margin-right: 15px;
							margin-top: 15px;
							background-size: 100%;
							background-repeat: no-repeat;
							box-sizing: border-box;
							display: flex;
							align-items: center;

							&.config-product-bg1 {
								background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/config-product-bg1.png");
							}

							&.config-product-bg2 {
								background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/config-product-bg2.png");
							}

							&.config-product-bg3 {
								background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/config-product-bg3.png");
							}

							&.config-product-bg4 {
								background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/config-product-bg4.png");
							}

							&:nth-child(2n+2) {
								margin-right: 0;
							}
						}

					}

					.no-cus-product-item {
						font-size: 12px;
						color: #fff;
						width: 100%;
						text-align: center;
						margin-top: 15px;
					}
				}
			}

			.cus-info-box {
				margin: 20px;
				position: relative;
				border-radius: 4px;

				.header-scan-bg {
					background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
					opacity: 0.18;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border-radius: 4px;
				}

				.cus-result-content-box {
					padding: 20px;

					.cus-result-title {
						font-size: 16px;
						color: #fff;
						font-weight: 500;
					}

					.cus-result-top1 {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-top: 10px;

						.cus-result-top1-chart {
							width: 130px;
							height: 130px;
						}

						.cus-result-text {
							margin: 5px 20px 0 20px;
							font-size: 16px;
							color: #fff;
							font-weight: 500;
							text-align: center;
						}
					}

					.cus-result-bottom-box {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: space-between;
						margin-top: 10px;
						overflow-x: auto;

						.cus-result-left-box {
							width: 100px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							padding: 0 12px;

							.cus-result-bottom-chart {
								width: 80px;
								height: 80px;
							}

							.cus-result-text {
								font-size: 12px;
								color: #fff;
								margin-top: 5px;
								text-align: center;
							}
						}
					}

				}

				.cus-info-content-box {
					display: flex;
					align-items: center;
					padding: 20px;
					position: relative;

					.cus-info-left-box {
						display: flex;
						flex-direction: column;

						.cus-info-left-title {
							font-size: 14px;
							color: #fff;
							font-weight: 400;
						}

						.cus-info-left-item-text {
							font-size: 16px;
							color: #fff;
							font-weight: 500;
							margin-top: 5px;
						}

						.cus-info-left-text {
							font-size: 16px;
							color: #fff;
							font-weight: bold;
						}

						.cus-info-left-bottom-text {
							font-size: 14px;
							color: rgba(255, 255, 255, 0.7);
							margin-top: 5px;
						}
					}

					.cus-info-chart-box {
						width: 80px;
						height: 80px;
						position: absolute;
						right: 20px;
						top: 50%;
						margin-top: -40px;
					}

					.cus-info-right-box {
						background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/replace/product-bg.png");
						background-size: 100%;
						background-repeat: no-repeat;
						position: absolute;
						right: 0;
						top: 0;
						width: 115px;
						height: 87px;
					}
				}


			}

			.cus-lsn-info-box {
				margin: 10px 20px;

				.info-box {
					background-color: #fff;
					border-radius: 4px;
					padding: 10px 15px;

					.info-title {
						display: flex;
						align-items: center;

						.info-title-icon {
							font-size: 24px;
							color: #FFB400;
						}

						.info-title-text {
							font-size: 16px;
							color: #000;
							font-weight: 500;
							margin-left: 5px;
						}
					}

					.info-content {
						font-size: 12px;
						color: #666;
						margin-top: 10px;

						.info-text-item {
							margin-top: 5px;
						}
					}
				}

				.result-box {
					background-color: #fff;
					border-radius: 4px;
					padding: 10px 15px 20px 15px;
					margin-top: 10px;

					.result-title {
						display: flex;
						align-items: center;

						.info-title-icon {
							font-size: 24px;
							color: #6AC5C6;
						}

						.info-title-text {
							font-size: 16px;
							color: #000;
							font-weight: 500;
							margin-left: 5px;
						}

					}

					.result-content {
						.result-type-box {
							border-radius: 4px;
							padding: 10px;
							border: 1px solid #f8f8f8;
							box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
							margin-top: 20px;

							&:first-child {
								margin-top: 10px;
							}

							.result-type-title {
								font-size: 14px;
								color: #333;
								display: flex;
								align-items: center;

								&::before {
									display: inline-block;
									content: "";
									width: 8px;
									height: 8px;
									background-color: #008aff;
									border-radius: 50%;
									margin-right: 5px;
								}
							}

							.result-type-item {
								margin-top: 10px;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.result-type-item-name {
									font-size: 12px;
									color: #666;
								}

								.result-type-item-possibility {
									background-color: #008aff;
									color: #fff;
									font-size: 12px;
									padding: 3px 8px;
									border-radius: 40px;
								}
							}
						}
					}
				}
			}

			.cus-lately-info-box {
				margin: 20px;
				border-radius: 4px;
				background-color: rgba(255, 255, 255, 0.18);
				padding-bottom: 20px;

				.cus-result-title {
					font-size: 16px;
					color: #fff;
					font-weight: 500;
					padding: 15px 20px 0 20px;
				}

				.cus-lately-list {
					margin: 15px 10px 0 10px;

					.cus-lately-item {
						padding: 15px 10px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #2c2e39;
						margin-top: 1px;

						&:first-child {
							border-top-left-radius: 4px;
							border-top-right-radius: 4px;
						}

						&:last-child {
							border-bottom-left-radius: 4px;
							border-bottom-right-radius: 4px;
						}

						.cus-lately-item-left-text {
							font-size: 14px;
							color: #fff;
						}

						.cus-lately-item-right-text {
							font-size: 12px;
							color: rgba(255, 255, 255, 0.75);
							display: flex;
							align-items: center;

							.copy-text {
								color: #008aff;
								margin-left: 10px;
							}
						}
					}
				}

			}

			.height {
				height: 40px;
			}
		}
	}
</style>
